// 设备、模具故障占比图表
var faultContrastEcharts;
var faultDurationAnalyseEcharts;
var data = [];
var dataCount = 10;
var startTime = +new Date();
var itemStyleArray = ['#FF0000', '#FF0000', '#00B050'];

var vm = new Vue({
    el: '#rrapp',
    data: {
        q: {
            devId: '', // 设备ID
            devName: '', // 设备名称
            daterange: '' // 日期时间段
        },
        columns1: [
            {
                title: '类型',
                key: 'type',
                align: 'center',
            },
            {
                title: '故障类别',
                key: 'faultType',
                align: 'center',
            },
            {
                title: '时长(分)',
                key: 'duration',
                align: 'center',
            }
        ],
        // 故障详情列表
        faultDetailList: [],
        faultDurationAnalyseOption: {
            tooltip: {
                formatter: function (params) {
                    return params.marker + params.name + ': ' + params.value[3] + '分钟';
                }
            },
            title: {
                text: '请选择相应铸造设备',
                left: 'center'
            },
            grid:{
                left: '30%',
                right: '30%',
                bottom: '30%',
                top: '50%',
                containLabel: true
            },
            dataZoom: [{
                type: 'slider',
                filterMode: 'weakFilter',
                showDataShadow: false,
                top: 400,
                height: 10,
                borderColor: 'transparent',
                backgroundColor: '#e2e2e2',
                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                handleSize: 20,
                handleStyle: {
                    shadowBlur: 6,
                    shadowOffsetX: 1,
                    shadowOffsetY: 2,
                    shadowColor: '#aaa'
                },
                labelFormatter: ''
            }, {
                type: 'inside',
                filterMode: 'weakFilter'
            }],
            grid: {
                height: 300
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    lineStyle: {
                        color: ['#E9EDFF']
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    lineStyle: {
                        color: '#929ABA'
                    }
                },
                axisLabel: {
                    color: '#929ABA',
                    inside: false,
                    align: 'center'
                }
            },
            yAxis: {
                data: ['模具异常时间', '设备异常时间', '正常生产时间']
            },
            series: [{
                type: 'custom',
                renderItem: function (params, api) {
                    var categoryIndex = api.value(0);
                    var start = api.coord([api.value(1), categoryIndex]);
                    var end = api.coord([api.value(2), categoryIndex]);
                    var height = api.size([0, 1])[1] * 0.6;
                    var rectShape = echarts.graphic.clipRectByRect({
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    }, {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    });
                    return rectShape && {
                        type: 'rect',
                        shape: rectShape,
                        style: api.style({
                            text: api.value(4)
                        })
                    };
                },
                itemStyle: {
                    opacity: 0.8
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: []
            }]
        },
        // 不同模具类别故障率Option模板
        faultContrastOption: {
            title: {
                text: '运行故障时间占比分布',
                left: 'center',
                textStyle: {
                    fontSize: 25
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            color: ['#00B050', '#ED7D31', '#FF0000', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            series: [
                {
                    name: '汇总项',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '40%'],
                    label: {
                        position: 'inner',
                        formatter: '{b}：\n{c}({d}%)',
                    },
                    labelLine: {
                        show: false
                    },
                    data: []
                },
                {
                    name: '明细项',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    label: {
                        formatter: ' {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    data: []
                }
            ]
        }
    },
    methods: {
        //显示设备列表-使用设备码
        getDeviceInfo: function () {
            openWindow({
                type: 2,
                title: '<i class="fa fa-file-text-o"></i> 选择设备',
                content: '../sys/deviceInfoSelect.html?isModuleRelated=1',
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var iframeWin = window["layui-layer-iframe" + index];
                    var res = iframeWin.getDeviceInfo();
                    if (!res) {
                        iview.Message.error("请选择一条记录");
                    } else {
                        vm.q.devName = res.devProductName + '-' + res.devProceName + '-' + res.devName;

                        vm.q.devId = res.id;
                        layer.close(index);
                    }
                }
            })
        },
        loadAndRenderKpiView: function () {
            var param = {};
            if (!vm.q.devId) {
                iview.Message.error("设备必选!");
                return;
            }
            param.devId = vm.q.devId;
            var dateRangeArray = vm.q.daterange;
            if (dateRangeArray.length != 2) {
                iview.Message.error("统计时长必选!");
                return;
            }
            if (dateRangeArray[0] != null && dateRangeArray[1] != null) {
                param.startDate = gmt2DateStr(dateRangeArray[0]) + ' 0:00:00';
                param.endDate = gmt2DateStr(dateRangeArray[1]) + ' 23:59:59';
            }
            // 加载设备维修工单数量分布统计数据
            Ajax.request({
                url: "../devmoldruntimerecord/statDevMoldFaultDurationAnalyse",
                type: "POST",
                params: JSON.stringify(param),
                contentType: "application/json",
                successCallback: function (res) {
                    // 需要从
                    var statResult = res.statResult;
                    // 设置颜色
                    if (statResult && statResult.length > 0) {
                        for (let i = 0; i < statResult.length; i++) {
                            statResult[i].itemStyle = {
                                normal: {
                                    color: itemStyleArray[statResult[i].value[0]]
                                }
                            }
                            statResult[i].value.push(statResult[i].name);
                        }
                    }
                    var option = {
                        title: {
                            text: vm.q.devName + ' 运行故障时间分布'
                        },
                        xAxis: {
                            min: vm.stringToDate(param.startDate).getTime(),
                            max: vm.stringToDate(param.endDate).getTime()
                        },
                        series: [{
                            data: statResult
                        }]
                    };
                    faultDurationAnalyseEcharts.setOption(option);
                }
            });
            // 统计设备-模具故障时长列表
            Ajax.request({
                url: "../devmoldruntimerecord/statDevMoldFaultDuration",
                type: "POST",
                params: JSON.stringify(param),
                contentType: "application/json",
                successCallback: function (res) {
                    vm.faultDetailList = res.statResult;
                }
            });
            // 加载设备维修工单数量分布统计数据
            Ajax.request({
                url: "../devmoldruntimerecord/statDevMoldDurationDistribution",
                type: "POST",
                params: JSON.stringify(param),
                contentType: "application/json",
                successCallback: function (res) {
                    // 需要从
                    var statResult = res.statResult;
                    var option = {
                        series: [{
                            data: statResult.inner
                        }, {
                            data: statResult.outer
                        }]
                    };
                    faultContrastEcharts.setOption(option);
                }
            });
        },
        stringToDate: function (str) {
            var tempStrs = str.split(" ");
            var dateStrs = tempStrs[0].split("-");
            var year = parseInt(dateStrs[0], 10);
            var month = parseInt(dateStrs[1], 10) - 1;
            var day = parseInt(dateStrs[2], 10);
            var timeStrs = tempStrs[1].split(":");
            var hour = parseInt(timeStrs [0], 10);
            var minute = parseInt(timeStrs[1], 10);
            var second = parseInt(timeStrs[2], 10);
            var date = new Date(year, month, day, hour, minute, second);
            return date;
        },
        reset: function () {
            vm.q = {
                devId: '',
                devName: '',
                startTime: '',
                endTime: ''
            }
        }
    },
    mounted: function () {
        // 设备、模具运行故障时长分析图表
        faultDurationAnalyseEcharts = echarts.init(document.getElementById("main"));
        faultDurationAnalyseEcharts.setOption(this.faultDurationAnalyseOption, true);
        // 设备、模具运行和故障占比对比
        faultContrastEcharts = echarts.init(document.getElementById("faultContrast"));
        faultContrastEcharts.setOption(this.faultContrastOption, true);
    }
});
